<template>
  <div id="app">
    <div class="content-container">
      <div class="image-container">
        <!--        <img src="@/assets/img/publicBrand/绘制数字农业产业园图 (1).png" alt="Image 1" class="image" />-->
        <img :src="imageUrls[0]" alt="数字农业产业园图片9" class="left-image" />
        <img :src="imageUrls[1]" alt="数字农业产业园图片10" class="left-image" />
      </div>

      <DynamicFlowEconomyComponent
          :title="'实施“文旅 +” 融合发展战略'"
          :content="[
'  深入挖掘铅山丰富的历史文化资源，如辛弃疾文化、连四纸文化、书院文化、明清古街文化等，将文化元素巧妙融入旅游产品与服务中，让游客在旅游过程中感受铅山独特文化魅力，以文化提升旅游内涵与品质，以旅游促进文化传承与传播。以稼轩乡辛弃疾文化遗迹为核心，开发辛弃疾文化主题旅游线路，建设辛弃疾文化纪念馆、辛词文化长廊等景点，举办中国辛词大会、辛弃疾诗词书法大赛等活动，吸引文化爱好者与游客前来观光体验。\n',
'   结合铅山实际，推动旅游与体育、商贸、 研学、康养等产业深度融合发展，打造更多差异化产品，丰富文旅业态。积极举办、承办各类体育赛事，为铅山吸引人流；在商贸上，依托清补凉美食城、古镇传统美食街等载体，突出挖掘和定制铅山美食文化，不断拓展夜游、夜购、夜演、夜娱等体验项目，发展夜间经济。'
      ]"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import DynamicFlowEconomyComponent from "@/views/regionalPublicBrand/DynamicFlowEconomyComponent.vue";

// 定义图片URL数组
const imageUrls = [
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E7%94%9F%E6%88%90%E6%95%B0%E5%AD%97%E5%86%9C%E4%B8%9A%E4%BA%A7%E4%B8%9A%E5%9B%AD%E5%9B%BE%E7%89%87%20%289%29.png',
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E7%94%9F%E6%88%90%E6%95%B0%E5%AD%97%E5%86%9C%E4%B8%9A%E4%BA%A7%E4%B8%9A%E5%9B%AD%E5%9B%BE%E7%89%87%20%2810%29.png'
];

// 预加载图片函数
const preloadImages = () => {
  imageUrls.forEach((url, index) => {
    const img = new Image();
    img.src = url;
    const altText = index === 0 ? '数字农业产业园图片9' : '数字农业产业园图片10';
    img.onload = () => {
      console.log(`图片预加载成功: ${altText}`);
    };
    img.onerror = (error) => {
      console.error(`图片预加载失败: ${altText}`, error);
    };
  });
};

// 在组件挂载前预加载图片
onMounted(() => {
  preloadImages();
});
</script>

<style scoped>
.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.left-image {
  width: 500px; /* 根据需要调整图片宽度 */
  margin-right: 20px; /* 图片与文本之间的间距 */
  margin-bottom: 40px;
}

#app {
  padding: 20px; /* 页面内边距 */
}

.content p {
  line-height: 1.6;
}
</style>
